import React, { Component } from 'react';
import { Table, Button, Icon, Pagination, Dialog } from '@icedesign/base';
import IceLabel from '@icedesign/label';
import IceContainer from '@icedesign/container';
import PropTypes from 'prop-types';
import { hashHistory } from 'react-router';

export default class ChannelTable extends Component {
  static displayName = 'ChannelTable';

  static propTypes = {
    loading : PropTypes.bool,
    channel : PropTypes.array.isRequired
  };

  static defaultProps = { loading : true };

  constructor(props) {
    super(props);
  }

  edit = (record) => {
    hashHistory.push({
      pathname:`/channel/edit/${record.id}`,
      state : record,
    })
  }

  renderOperator = (value, index, record) => {
    return (
      <Button.Group>
          <Button type="primary" onClick={this.edit.bind(this, record)}>编辑</Button>
      </Button.Group>
    );
  };

  renderStatus = (value, index, record) => {
    if(record.disable){
      return ( <IceLabel status="default">禁用</IceLabel> )
    }else{
      return ( <IceLabel status="success">启用</IceLabel> )
    }
  }

  render() {
    return (
      <div className="selectable-table" style={styles.selectableTable}>
        <IceContainer>
          <Table dataSource={this.props.channel} isLoading={this.props.loading} >
            <Table.Column title="渠道编码" dataIndex="id" width={100} />
            <Table.Column title="渠道名称" dataIndex="name" width={100} />
            <Table.Column title="状态" cell={this.renderStatus} align="center" width={50} />
            <Table.Column title="说明" dataIndex="memo" width={300} />
            <Table.Column title="操作" cell={this.renderOperator} align="center" width={100} />
          </Table>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  batchBtn: {
    marginRight: '10px',
  },
  IceContainer: {
    marginBottom: '20px',
    minHeight: 'auto',
    display: 'flex',
    justifyContent: 'space-between',
  },
  removeBtn: {
    marginLeft: 10,
  },
  pagination: {
    textAlign: 'right',
    paddingTop: '26px',
  },
};
